﻿@{
    Layout = "_Layout";
}
<div id="app">
    <el-container>
        <el-header height="60px">

        </el-header>
        <el-main>
            <img  src="/images/bg_login.jpeg" />
            <!-- 内容-->
            <div class="form-container">
                <div class="container-inner">
                    <div class="login-title">
                        <div class="title">智教云平台(管理系统)</div>
                        <br />
                        <div class="sub-title">用户登录</div>
                    </div>
                    <div class="login-form-container">
                        <el-form :model="form" :label-width="formLabelWidth" :rules="rules" ref="loginForm" style="width:80%">
                            <el-row >
                                <el-col :span="24">
                                    <div class="account-container">
                                        <el-form-item label="账号" prop="userName">
                                            <el-input v-model="form.userName" prefix-icon="el-icon-user" type="text" placeholder="用户名" clearable autocomplete="on"></el-input>
                                            </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div class="pwd-container">
                                            <el-form-item label="密码" prop="pwd">
                                                <el-input  v-model="form.pwd" prefix-icon="el-icon-user" type="password" placeholder="密码" clearable autocomplete="on"></el-input>
                                            </el-form-item>
                                    </div>
                                </el-col>
                             </el-row>
                             <el-row style="display:flex;align-items:center;justify-content:center;margin-top:20px;" >
                                <div class="submit-container">
                                    <div class="grid-content bg-purple-dark">
                                        <el-button type="primary" v-on:click="onSubmit" style="height:40px;border-radius:5px">登录</el-button>
                                    </div>
                                </div>
                             </el-row>
                        </el-form>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer height="190px">
            <!--底部-->
        </el-footer>
    </el-container>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            formLabelWidth:'70px',
            form: {
                userName: '',
                pwd: ''
            },
            rules: {
                userName: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                pwd:[
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        },
        methods: {
            // 登录提交
            onSubmit() {
                let that = this;
                debugger;
                that.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        axios.post('/api/account/login-submit', that.form)
                            .then(function (res) {
                                let data = res.data;
                                if (data.code === 0) {
                                    window.location.href = "/home/index";
                                }
                                else {
                                    that.$message.error(data.msg);
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }
                });
            }
        },
        created() {

        },
        mounted() {

        }
    });
</script>
<style>
    body {
        height: 100%;
        margin: 0;
    }

        body .container {
            height: 100%;
        }

            body .container .pb-3 {
                height: 100%;
            }

    #app {
        height: 100%;
        width: 100%;
    }

        #app .el-container {
            height: 100%;
            width: 100%;
        }

    .el-container .form-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        z-index:99 !important;
    }

        .el-container .form-container .container-inner {
            z-index: 55;
            height: 420px;
            width: 465px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #F2F2F2;
            box-shadow: 0px 0px 4px 3px #236B83;
        }

    .container-inner .login-title {
        display: flex;
        flex-direction: column;
        margin-bottom:20px;
    }

    .login-title .title {
        text-align: center;
        color: #000;
        font-weight: 300;
        font-size: 30px;
        /* margin-left:50px; */
    }

    .login-title .sub-title {
        text-align: center;
        color: #999;
        font-weight: 300;
        /* margin-left: 50px; */
    }

    .container-inner .login-form-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        justify-content: center;
        width:100%;
    }

    .el-header {
        background-color: #246A83;
        box-shadow: rgb(204, 204, 204) 0px 15px 10px -15px;
    }

    .el-footer {
        background-color: #246B81;
    }

    .submit-container {
        width: 50%;
    }

    .el-main {
        position:relative !important;
        padding:0px;
    }
    .el-main img{
        width:100%;
        height:100%;
        position:absolute;
        z-index:0;
    }
        .submit-container .el-button {
            width: 100%;
            height: 30px;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #009688 !important;
        }

    .account-container{

    }

    .pwd-container{


    }
</style>